﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>微分销--结算页</title>

  <link rel="stylesheet" type="text/css" href="css/webbase.css" />
  <link rel="stylesheet" type="text/css" href="css/pages-getOrderInfo.css" />
  <link rel="stylesheet" type="text/css" href="css/pages-cart.css" />
</head>

<body>
  <!--head-->
  <div id="orderInfoApp">
    <div class="top">
      <shortcut />
    </div>

    <div class="cart py-container">

      <!--logoArea-->
      <div class="logoArea">
        <div class="fl logo"><span class="title">结算页</span></div>
      </div>

      <!--主内容-->
      <div class="checkout py-container">
        <div class="checkout-tit">
          <h4 class="tit-txt">填写并核对订单信息</h4>
        </div>



        <div class="checkout-steps">
          <div class="step-tit">
            <h5>购买信息</h5>
          </div>

          <div class="step-cont">
            <!-- <p>
						<span>套餐名称：16G内存、红色、250G固态硬盘</span><br/>
						<span>价格：￥2000</span><br/>
						<span>分成：￥20/个</span><br/>
					</p> -->
            <div class="cart-main">
              <div class="yui3-g cart-th">
                <div class="yui3-u-1-4">SKU商品名称</div>
                <div class="yui3-u-1-4">规格</div>
                <div class="yui3-u-1-4">库存</div>
                <div class="yui3-u-1-8">单价（元）</div>
                <div class="yui3-u-1-8">分成（元）</div>
                <div class="yui3-u-1-8">购买数量</div>
                <div class="yui3-u-1-8">小计（元）</div>
              </div>
              <div class="cart-item-list">

                <div class="cart-body">
                  <div class="cart-list">
                    <ul  class="goods-list yui3-g">
                      <li class="yui3-u-3-24" style="text-align: center;">
                        {{goods.goodsName}}
                      </li>
                      <li class="yui3-u-6-24" style="text-align: center;"><span v-for="(v, k) in specObject">{{k}}:{{v}}<br/></span></li>
                      <li class="yui3-u-4-24" style="text-align: center;"><span class="price">{{skuInfo.price}}</span>
                      <li class="yui3-u-4-24" style="text-align: center;"><span class="price">{{skuInfo.num}}</span>
                      </li>
                      <li class="yui3-u-4-24" style="text-align: center;"><span class="price">{{skuInfo.tc}}</span>
                      </li>
                      <li class="yui3-u-3-24" style="text-align: center;"><span class="price">
                          <button @click="decry(index)">-</button>
                          <input  v-model="orderDto.buyNum" style="width: 40px;" type="text" />
                          <button @click="incre(index)">+</button>
                        </span></li>
                      <li class="yui3-u-4-24" style="text-align: center;"><span
                          class="price">{{skuInfo.price*orderDto.buyNum}}</span></li>
                    </ul>
                  </div>
                </div>
              </div>

            </div>

          </div>
          <!--收件人信息-->
          <div class="step-tit">
            <h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false"
                  class="newadd">新增收货地址</a></span></h5>
          </div>
          <div class="step-cont">
            <div class="addressInfo">
              <ul class="addr-detail">
                <li class="addr-item" v-for="(addr,i) in addressList" :key="i" @click="chooseAddress(i)">
                  <div>

                    <div class="con address">
                      <a href="javascript:;">{{addr.locName}}<span title="点击取消选择"></span>&nbsp;</a>
                      <span>&nbsp;&nbsp;&nbsp;{{addr.locInfo}}</span>
                      <span>&nbsp;&nbsp;&nbsp;{{addr.locTel}}</span>
                      <span class="base"  v-if="addr.locIsDefault==1"></span>>默认地址</span>
                      <span class="edittext"><a data-toggle="modal" data-target=".edit"
                          data-keyboard="false">编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>
                    </div>
                  </div>

                </li>
              </ul>
              <!--添加地址-->
              <div tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
                      <h4 id="myModalLabel" class="modal-title">添加收货地址</h4>
                    </div>
                    <div class="modal-body">
                      <form action="" class="sui-form form-horizontal">
                        <div class="control-group">
                          <label class="control-label">收货人：</label>
                          <div class="controls">
                            <input v-model="address.locName" type="text" class="input-medium">
                          </div>
                        </div>

                        <div class="control-group">
                          <label class="control-label">详细地址：</label>
                          <div class="controls">
                            <input v-model="address.locInfo" type="text" class="input-large">
                          </div>
                        </div>
                        <div class="control-group">
                          <label class="control-label">联系电话：</label>
                          <div class="controls">
                            <input v-model="address.locTel" type="text" class="input-medium">
                          </div>
                        </div>
                        <div class="control-group">
                          <label class="control-label">邮箱：</label>
                          <div class="controls">
                            <input v-model="address.locEmail" type="text" class="input-medium">
                          </div>
                        </div>
                        <div class="control-group">
                          <label class="control-label">地址别名：</label>
                          <div class="controls">
                            <input v-model="address.locType" type="text" class="input-medium">
                          </div>
                          <div class="othername">
                            建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#"
                              class="sui-btn btn-default">父母家</a>　<a href="#" class="sui-btn btn-default">公司</a>
                          </div>
                        </div>
                      </form>
                    </div>
                    <div class="modal-footer">
                      <button type="button" @click="saveAddress()" data-ok="modal"
                        class="sui-btn btn-primary btn-large">确定</button>
                      <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
                    </div>
                  </div>
                </div>
              </div>
              <!--确认地址-->
            </div>
            <div class="hr"></div>

          </div>
          <div class="hr"></div>
          <!--支付和送货-->
          <div class="payshipInfo">
            <div class="step-tit">
              <h5>支付方式</h5>
            </div>
            <div class="step-cont">
              <ul class="payType">
                <li :class="{selected: order.paymentType == 1}" @click="order.paymentType=1">微信付款<span
                    title="点击取消选择"></span></li>
                <li :class="{selected: order.paymentType == 2}" @click="order.paymentType=2">货到付款<span
                    title="点击取消选择"></span></li>
              </ul>
            </div>
            <div class="hr"></div>

            <div class="hr"></div>
          </div>
          <div class="linkInfo">
            <div class="step-tit">
              <h5>发票信息</h5>
            </div>
            <div class="step-cont">
              <span>普通发票（电子）</span>
              <span>个人</span>
              <span>明细</span>
            </div>
          </div>
          <div class="cardInfo">
            <div class="step-tit">
              <h5>使用优惠/抵用</h5>
            </div>
          </div>
        </div>
      </div>

      <div class="clearfix trade">
        <div class="fc-price">应付金额:　<span class="price">¥{{skuInfo.price*orderDto.buyNum}}</span></div>
        <div class="fc-receiverInfo">
          寄送至:{{selectAddress.locInfo}}
          收货人：{{selectAddress.locName}} {{selectAddress.locTel}}
        </div>
      </div>
      <div class="submit">
        <a @click.prevent="saveOrder()" class="sui-btn btn-danger btn-xlarge" href="pay.html">提交订单</a>
      </div>
    </div>

  </div>
  <script src="./js/vue/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">

		
    axios.defaults.timeout = 5000;   // 超时时间
		axios.defaults.baseURL = "http://localhost:8086/";  // baseURL   
		
		axios.interceptors.request.use(function(config){
			console.log(config)
			config.withCredentials= false //前端不传cookie给后台   必须加
			//设置jwt令牌
			config.headers.token=sessionStorage.getItem("token")
			return config;
    })

    //响应拦截器
    axios.interceptors.response.use(res=>{
      return res.data;
    })


    var vm = new Vue({
      el: "#orderInfoApp",
      data: {
        goods:{},
        skuInfo:{},
				addressList:[],
				address:{},
				order:{},
				fee:0,
				specObject:{},
				orderDto:{
					buyNum:0,
					address:{

					}
				}
      },
      methods: {
              urlToObj(url) {//解析url获取参数的工具函数
                url = url.split("?")[1];
                //"course1=js&course2=css&course3=jQ"
                var ary = url.split("&");
                //["course1=js","course2=css","course3=jQ"];
                var obj = {};
                ary.forEach((item) => {
                  var a = item.split("=");//["course1","js"]
                  obj[a[0]] = a[1];
                });
                return obj;
        },
        incre(index){//+
					this.orderDto.buyNum = this.orderDto.buyNum+1;
        },
         
				decry(index){//-
					if(this.orderDto.buyNum>0){
						this.orderDto.buyNum = this.orderDto.buyNum-1;
					}
        },
        chooseAddress(index){//选择收件人信息
					this.orderDto.address = this.addressList[index];
				},
       	saveOrder(){  //保存订单
          location.href="/pay.html?orderId="+1318
					
					// axios.post("/order/save",this.orderDto).then(res=>{
						
					// 	if(res.success){//下单成功
					// 		location.href="/pay.html?orderId="+res.data
					// 	}else{
					// 		alert(res.msg);
					// 	}	
						
					// })

				},
				selectAddress(){

				} 

        



      },

      created() {
        //判断用户是否登录
        if (!sessionStorage.getItem("token")) {
          location.href="/login.html"
        }

 
        //获取url中的skuId 
       var urlParams= this.urlToObj(location.href)
       if (!urlParams.skuId) {
           location.href="/index.html"
       }else{
         axios.get("goodsSku/findSkuById?skuId="+urlParams.skuId).then(res=>{
          console.log(res)      
          vm.skuInfo = res.data;
                
               var specObject= JSON.parse(vm.skuInfo.spec)
               console.log(specObject)
         })
         axios.get("/goods/selectOne?id="+urlParams.skuId).then(res=>{
                                        
                        this.goods=res
					})
       }


       		//获取用户的地址列表
				axios.get("/address/list").then(res=>{
					  vm.addressList = res;
						
        })
        

      },
    })
  </script>
  <!-- 底部栏位 --> 
  <!--页面底部，由js动态加载-->
  <div class="clearfix footer"></div>
  <script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
  <script type="text/javascript">$(".footer").load("foot.html");</script>
  <!--页面底部END-->

  <script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
  <script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
  <script type="text/javascript" src="js/pages/getOrderInfo.js"></script>
</body>

</html>